<template>
  <el-card class="product-card" :body-style="{ padding: '0px', width: '100%' }">
    <div class="product-card-cover cover">
      <img :src="getPath(productInfo.cover)" alt="">
    </div>
      <div class="product-card-body" style="padding: 14px;">
        <span class="product-card-title">{{ productInfo.title }}</span>
        <div class="bottom clearfix">
          <time class="time">{{ productInfo.currentDate }}</time>
          <el-button type="text" class="button">查看</el-button>
        </div>
      </div>
  </el-card>
</template>

<script>
import shitImg from "@/assets/logo.png";
import getPath from "@/utils/imagePath.js"
/**
 * props: productInfo<object> 必须含有以下字段:
 *   id<number>             产品的id，用于页面跳转
 *   cover<string>         图片的链接
 *   title<string>          标题的内容
 *   currentDate<string>    创建的时间
 */
export default {
  props: {
    productInfo: {
      type: Object,
      default() {
        return {
          id: 0,
          cover: shitImg,
          title: "标题",
          currentDate: "0123-00-00"
        };
      }
    }
  },
  methods: {
    getPath
  }
};
</script>


<style lang="scss" scoped>
.product-card {
  margin: 10px 25px;
  width: 380px;
  height: 300px;
  border: none;

  .product-card-cover {
    overflow: hidden;
  }
  &:hover .product-card-cover img {
    transform: scale(1.1);
    transition: all 0.4s;
  }
}
.time {
  font-size: 14px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.product-card-cover img {
  width: 100%;
  height: 300px - 78px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>